<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">审批</block>
		</cu-custom>
		<view class="cu-bar bg-white search">
			<view class="search-form radius">
				<text class="padding-lr-sm"></text>
				<input class="padding-r" type="text" placeholder="申请名称、发起人、变化、内容" confirm-type="search" />
			</view>
			<view class="action" @tap="showModal"><image class="option-icon" src="/static/audit/option.png" mode="aspectFit"></image></view>
		</view>
		<view class="nav bg-white flex text-center">
			<view class="cu-item flex-sub cur">待审批(1)</view>
			<view class="cu-item flex-sub">已审批</view>
			<view class="cu-item flex-sub">抄送我</view>
			<view class="cu-item flex-sub">已发起</view>
		</view>

		<view class="list padding-lr bg-gray padding-top" style="min-height: 100vh;">
			<view class="item bg-white radius">
				<view class="cu-bar padding-tb title">
					<view class="action"><text class="text-xl text-bold">李荣浩-维修费申请</text></view>
					<view class="action"><text class="text-orange">审批中</text></view>
				</view>
				<view class="subjects">
					<view class="cu-bar">
						<view class="action">
							<text class="lable text-gray">所属项目：</text>
							<text class="value">龙湖项目</text>
						</view>
					</view>
					<view class="cu-bar">
						<view class="action">
							<text class="lable text-gray">费用主题：</text>
							<text class="value">汽车维修</text>
						</view>
					</view>
					<view class="cu-bar">
						<view class="action">
							<text class="lable text-gray">费用总计：</text>
							<text class="value">5000.00</text>
						</view>
					</view>
					<view class="cu-bar">
						<view class="action">
							<text class="lable text-gray">提交时间：</text>
							<text class="value">2020-03-09 14:00</text>
						</view>
					</view>
				</view>
				<view class="actions padding">
					<button class="cu-btn line-blue radius margin-right">拒绝</button>
					<button class="cu-btn line-blue radius margin-right">同意</button>
					<button class="cu-btn line-blue radius margin-right">查看详情</button>
				</view>
			</view>

			<view class="item bg-white radius margin-top">
				<view class="cu-bar padding-tb title">
					<view class="action"><text class="text-xl text-bold">李荣浩-维修费申请</text></view>
					<view class="action"><text class="text-gray">已通过</text></view>
				</view>
				<view class="subjects">
					<view class="cu-bar">
						<view class="action">
							<text class="lable text-gray">所属项目：</text>
							<text class="value">龙湖项目</text>
						</view>
					</view>
					<view class="cu-bar">
						<view class="action">
							<text class="lable text-gray">费用主题：</text>
							<text class="value">汽车维修</text>
						</view>
					</view>
					<view class="cu-bar">
						<view class="action">
							<text class="lable text-gray">费用总计：</text>
							<text class="value">5000.00</text>
						</view>
					</view>
					<view class="cu-bar">
						<view class="action">
							<text class="lable text-gray">提交时间：</text>
							<text class="value">2020-03-09 14:00</text>
						</view>
					</view>
				</view>
				<view class="actions padding"><button class="cu-btn line-blue radius margin-right">查看详情</button></view>
			</view>
		</view>

		<view class="cu-modal drawer-modal justify-end" :class="modalOpen ? 'show' : ''" @tap="showModal">
			<view class="cu-dialog basis-xl" @tap.stop="">
				<view class="">
					<view class="cu-bar">
						<view class="action"><text class="text-xl text-bold">审批类目</text></view>
					</view>
					<view class="">
						<view class="cu-bar">
							<view class="action"><text>费用审批</text></view>
						</view>
						<view class="item grid col-2">
							<view class="margin-tb-xs"><button class="cu-btn lg bg-gray">维修费</button></view>
							<view class="margin-tb-xs"><button class="cu-btn lg bg-gray">差旅费</button></view>
							<view class="margin-tb-xs"><button class="cu-btn lg bg-gray">维修费</button></view>
							<view class="margin-tb-xs"><button class="cu-btn lg bg-gray">差旅费</button></view>
							<view class="margin-tb-xs"><button class="cu-btn lg line-blue">维修费</button></view>
							<view class="margin-tb-xs"><button class="cu-btn lg bg-gray">差旅费</button></view>
							<view class="margin-tb-xs"><button class="cu-btn lg bg-gray">维修费</button></view>
							<view class="margin-tb-xs"><button class="cu-btn lg bg-gray">差旅费</button></view>
							<view class="margin-tb-xs"><button class="cu-btn lg bg-gray">维修费</button></view>
							<view class="margin-tb-xs"><button class="cu-btn lg bg-gray">差旅费</button></view>
						</view>
					</view>
					<view class="">
						<view class="cu-bar">
							<view class="action"><text>业务审批</text></view>
						</view>
						<view class="item grid col-2">
							<view class="margin-tb-xs"><button class="cu-btn lg bg-gray">业务登记</button></view>
							<view class="margin-tb-xs"><button class="cu-btn lg bg-gray">业务登记</button></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			modalOpen: false,
			CustomBar: this.CustomBar,
			page:1,
			type:0,
			loginName:'',
			list:[],
		};
	},
	onLoad() {
		this.loginName =  uni.getStorageSync('userName');
		this.getList();
	},
	methods: {
		showModal() {
			this.modalOpen = !this.modalOpen;
		},
		getList(){
			let requestUrl = '/usual/applyList/' + this.loginName + '/' + this.type + '?service=expense';
			this.$utils.http.post(requestUrl, {})
				.then(res => {
					if (res.code === 200) {
						if (res.data && res.msg == "success") {
							console.log('列表', res.data);
						} else {
							uni.hideLoading();
							uni.showModal({
								showCancel: false,
								content: '登录失败！',
								success: function(res) {}
							});
						}
					} else {
						uni.hideLoading();
						uni.showModal({
							showCancel: false,
							content: res.msg,
							success: function(res) {}
						});
					}
				}).catch(err => {
					uni.hideLoading();
					uni.showModal({
						showCancel: false,
						content: '请求失败',
						success: function(res) {}
					});
				})
		}
	}
};
</script>

<style lang="scss" scoped>
.cu-bar {
	&.search {
		.option-icon {
			width: 37upx;
			height: 37upx;
		}
	}
}
.cu-dialog {
	z-index: 9999;
}

.list {
	.item {
		.subjects {
			.cu-bar {
				min-height: 30px;
			}
		}
	}
}
</style>
